<%-- 
    Document   : drinksreport
    Created on : Oct 23, 2011, 7:32:03 AM
    Author     : javierpanchi
--%>

<%@page contentType="text/html" pageEncoding="UTF-8" import="edu.uq.comp7705.entity.Session"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
    <head> 
        <title>Drinks Report</title> 
        <meta name="viewport" content="width=device-width, initial-scale=1,text/html; charset=UTF-8"> 
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>
        <link rel="stylesheet" href="/Drinkmeter/css/TabStyle.css">
    </head> 
    <script>

        function funcionCallback(){
            if( ajax.readyState == 4 )
            {
                if( ajax.status == 200 )
                {
                    //document.getElementById(user).innerHTML = "<b>"+ajax.responseText+"</b>";
                    document.write(ajax.responseText);
                }
            }
        }

        function showDrink(id){
            user=id;
            if( window.XMLHttpRequest )
                ajax = new XMLHttpRequest();
            else
                ajax = new ActiveXObject("Microsoft.XMLHTTP");
            ajax.onreadystatechange = funcionCallback;
            ajax.open( "POST", "/Drinkmeter/DrinksServlet", true );
            ajax.send( "" );
            
        }
        

        
    
    </script>
    <body onload="timerCount('drinksReport')">
        <div data-role="page">
            <div data-role="header">
                <h1>Stats</h1>
            </div><!-- /header -->
            <div data-role="content">
                <label for="name">Select profile picture to <br/>see personal status</label><br/>
                <form name="form1" action="/Drinkmeter/General?opt=add">
                    <c:forEach var='session' items='${sessionDrink}'>
                        <div data-role="">
                            <a href="DrinksServlet?opt=bac&facebookId=${session.facebookid}&session=${session.id}"><img src='https://graph.facebook.com/${session.facebookid}/picture'/></a>
                                <c:forEach var='sessionDrink' items='${session.sessionDrinkList}'>
                                    <img src="/Drinkmeter/images/icons/add/${sessionDrink.drkDrinksId.smallIcon}" width="16px" height="16px"/>:${sessionDrink.quantity}
                                </c:forEach>
                            <br/>
                        </div>
                    </c:forEach>
                    <br/>
                </form>

                <div style="top: 310.5px;" class="ui-loader ui-body-a ui-corner-all"><span class="ui-icon ui-icon-loading spin"></span><h1>loading</h1></div>
                <footer>
                    <div id='tabbarcontainer'>
                        <ul id='tabbar'>
                            <div id="mensajes"></div>
                            <li class='tab'><a href="#" id='tab_home' onclick="window.location='/Drinkmeter'">Tab 1</a></li>
                            <li class='tab'><a href="#" onclick="window.location='/Drinkmeter/General?opt=friends'" id='tab_friends'>Tab 2</a></li>
                            <li class='tab'><a href="#" onclick="window.location='/Drinkmeter/jsp/drinks.jsp'" id='tab_drinks'>Tab 3</a></li>
                            <li class='tab'><a href="#" onclick="window.location='/Drinkmeter/DrinksServlet?opt=report'" id='tab_stats'>Tab 4</a></li>
                            <li class='tab'><a href="#" onclick="window.location='/Drinkmeter/jsp/leave.jsp'" id='tab_locations'>Tab 5</a></li>
                        </ul>
                    </div>
                    <script type='text/javascript'>
                        $('li.tab a').bind('click', function(event) {
                            $('li.tab a').removeClass('active');
                            $(event.target).addClass('active');
                        });
                    </script>
                </footer>
            </div><!-- /content -->
        </div><!-- /page -->
    </body>
</html>
